<template>
  <div class="border-line card">
    <header-title title="保障人员分析" @fullScreen="handleFullScreen"></header-title>
    <div class="card-content">
      <div class="item">
        <echarts-view ref="personnel" :options="personnelOption" height="320px"></echarts-view>
      </div>
      <div class="item">
        <echarts-view ref="domicile" :options="domicileOption" height="320px"></echarts-view>
      </div>
      <div class="item">
        <echarts-view ref="category" :options="educationOption" height="320px"></echarts-view>
      </div>
      <div class="item">
        <echarts-view ref="category" :options="ageOption" height="320px"></echarts-view>
      </div>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import { getProportionTypes } from '@/api/analysis'
export default {
  props: {
    areaID: {
      type: Number,
      default: 0,
    },
  },
  components: {
    headerTitle,
    echartsView,
  },
  data() {
    return {
      personnelOption: {},
      domicileOption: {},
      educationOption: {},
      ageOption: {},
    }
  },
  mounted() {
    this.fetchData()
  },
  watch: {
    areaID: function (newVal, oldVal) {
      this.fetchData()
    },
  },
  methods: {
    fetchData() {
      const lB = getProportionTypes({ RegionNo: this.areaID, mode: 'RYLB' })
      const HJ = getProportionTypes({ RegionNo: this.areaID, mode: 'HJ' })
      const XL = getProportionTypes({ RegionNo: this.areaID, mode: 'XL' })
      const NL = getProportionTypes({ RegionNo: this.areaID, mode: 'NL' })
      Promise.all([lB, HJ, XL, NL]).then((res) => {
        this.personnelOption = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          title: [
            {
              text: '人员类别',
              left: '48%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
              },
            },
          ],
          legend: {
            orient: 'horizontal',
            left: 'left',
            bottom: 0,
            textStyle: {
              color: '#ffffff',
            },
          },
          series: [
            {
              name: '人员类别',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['50%', '50%'],
              label: {
                show: true,
                position: 'outside',
                formatter: '{b} : {c}人',
                color: '#ffffff',
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
              labelLine: {
                show: true,
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + '人'
                },
              },
              data: res[0],
            },
          ],
        }
        this.domicileOption = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          title: [
            {
              text: '户籍',
              left: '48%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
              },
            },
          ],
          legend: {
            orient: 'horizontal',
            left: 'left',
            bottom: 0,
            textStyle: {
              color: '#ffffff',
            },
          },
          series: [
            {
              name: '户籍',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['50%', '50%'],
              label: {
                show: true,
                position: 'outside',
                color: '#ffffff',
                formatter: '{b} : {c}人',
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
              labelLine: {
                show: true,
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + '人'
                },
              },
              data: res[1],
            },
          ],
        }
        this.educationOption = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          title: {
            text: '学历',
            top: '5%',
            left: '48%',
            textAlign: 'center',
            textStyle: {
              fontWeight: 'normal',
              color: '#ffffff',
            },
          },
          legend: {
            orient: 'horizontal',
            left: 'left',
            bottom: 0,
            textStyle: {
              color: '#ffffff',
            },
          },
          series: [
            {
              name: '学历',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['50%', '50%'],
              label: {
                show: true,
                position: 'outside',
                color: '#ffffff',
                formatter: '{b} : {c}人',
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
              labelLine: {
                show: true,
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + '人'
                },
              },
              data: res[2],
            },
          ],
        }
        this.ageOption = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          title: {
            text: '年龄',
            top: '5%',
            left: '48%',
            textAlign: 'center',
            textStyle: {
              fontWeight: 'normal',
              color: '#ffffff',
            },
          },
          legend: {
            orient: 'horizontal',
            left: 'left',
            bottom: 0,
            textStyle: {
              color: '#ffffff',
            },
          },
          series: [
            {
              name: '年龄',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['50%', '50%'],
              label: {
                show: true,
                position: 'outside',
                color: '#ffffff',
                formatter: '{b} : {c}人',
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
              labelLine: {
                show: true,
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + '人'
                },
              },
              data: res[3],
            },
          ],
        }
      })
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
    beforeDestoryed() {
      window.removeEventListener('resize')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 400px;
  &-content {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    .item {
      flex: 1;
    }
  }
}
</style>
